<template>
  <van-tabbar v-model="currentIndex" route>
    <van-tabbar-item
      v-for="(item, index) in tabbarData"
      :key="index"
      :to="item.path"
      :icon="item.icon"
    >
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const tabbarData = [
  {
    title: '首页',
    icon: 'home-o',
    path: '/home'
  },
  {
    title: '名菜专栏',
    icon: 'fire-o',
    path: '/chef'
  },
  {
    title: '发布',
    icon: 'plus',
    path: '/publish'
  },
  {
    title: '消息',
    icon: 'chat',
    path: '/message'
  },
  {
    title: '我的',
    icon: 'user',
    path: '/personal'
  }
];

const currentIndex = ref(0);
</script>

<style scoped>
.van-tabbar-item.van-tabbar-item--active {
  color: #e64340 !important;
}

.van-tabbar {
  background-color: #fff;
}
</style>
